<template>
  <div id="home">
    <div class="page-header">
      <h2>首页</h2>
    </div>
    <div class="panel-body">
      <p>{{ count }}</p>
      <p>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
      </p>
    </div>

    <!-- 计算器 -->
    <div class="computeBox">
        <div class="result">{{result}}</div>
        <div class="enter">{{enter === "" ? 0 : enter}}</div>
        <div class="keys">
            <div class="list">
                <!--键盘区域-->
                <keyboard v-for="(item,index) in keys" :key="index" :value="item"></keyboard>
            </div>
        </div>
    </div> 

    <div>
        <input type="text" v-model="inputContent" @blur="changeData">
        <div>{{doneTodos}} 长度为{{doneTodosCount}}</div>
        <div>{{getTodoById}}</div>
    </div>


  </div>
</template>
<script>
import keyboard from "./keyboard";
import { mapState } from "vuex";
export default{
  name: "home",
  components: {
    keyboard
  },
  data() {
    return {
      keys: [
        "clear",
        "+",
        "-",
        "*",
        "7",
        "8",
        "9",
        "/",
        "4",
        "5",
        "6",
        "0",
        "1",
        "2",
        "3",
        "="
      ],
      localCount: 2,
      inputContent:1,
    };
  },

  methods: {
    increment() {
      this.$store.commit("add");
    },
    decrement() {
      this.$store.commit("minus");
    },
    changeData(){
        this.$store.commit('getTodoById',this.inputContent);
    }
  },
  computed: mapState({
    count() {
      return this.$store.state.count;
    },

    result() {
      return this.$store.state.result;
    },
    enter() {
      return this.$store.state.enter;
    },
    doneTodos() {
        console.log(this.$store.getters.doneTodos,999999);
      return this.$store.getters.doneTodos;
    },
    doneTodosCount(){
        return this.$store.getters.doneTodosCount;
    },
    getTodoById(){
        console.log(this.inputContent,78787979);
        // console.log(this.$store);
        return this.$store.getters.getTodoById(this.inputContent)
    },
  })
};
</script>

<style scoped>
#home {
  width: 80%;
  margin: 0 auto;
}
.computeBox {
  width: 300px;
  height: 500px;
  background-color: #fff;
  margin: 0 auto;
}
.list {
  width: 100%;
  /* display: flex; */
}
.list div {
  /* flex: 1; */
  float: left;
  width: 24.3%;
  height: 30px;
  border: 1px solid #ddd;
  background-color: aqua;
  line-height: 30px;
  text-align: center;
}
.result {
  height: 30px;
  width: 100%;
}
.enter {
  height: 30px;
  width: 100%;
}
</style>

